<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body>

<div id="app">
    <div>
        <el-form  status-icon  label-width="100px"
                  class="demo-ruleForm" style="display: inline-block;">
            <el-select v-model="area.state" placeholder="请选择状态">
                <el-option>所有</el-option>
                <el-option v-for="(j,i) in stateArr" :label="j.name" :value="j.id"></el-option>
            </el-select>
        </el-form>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="primary" icon="el-icon-plus" circle  @click="addArealoyee()"></el-button>


    </div>
    <template>
        <el-table
                :data="info"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="aname"
                    label="区域名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="state.name"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="location.lname"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="empInfo.ename"
                    label="管理员">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="primary" plain @click="updateStateON(scope.row.id,scope.row.state.id)" >启用</el-button>
                    <el-button type="danger" plain  @click="updateStateOFF(scope.row.id,scope.row.state.id)">禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="areaNumberAll">
        </el-pagination>

        <el-dialog title="添加区域" :visible.sync="addAreaVisible" width="30%" center>
            <el-form :model="AreaInfo" status-icon :rules="rules" ref="AreaInfo" label-width="100px"
                     class="demo-ruleForm">

                <el-form-item label="区域名" prop="aname">
                    <el-input type="text" v-model="AreaInfo.aname"></el-input>
                </el-form-item>

                <el-form-item label="区域状态" prop="state">
                <el-select v-model="AreaInfo.state" placeholder="请选择状态">
                    <el-option v-for="(j,i) in stateArr" :label="j.name" :value="j.id"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="选择地址" prop="lid">
                    <el-select v-model="AreaInfo.lid" placeholder="请选择地址">
                        <el-option v-for="(d,i) in locationArr" :label="d.lname" :value="d.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="管理员" prop="irid">
                    <el-select v-model="AreaInfo.irid" placeholder="请选择状态">
                        <el-option v-for="(a,i) in adminArr" :label="a.ename" :value="a.id"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
					<el-button @click="addAreaVisible = fales">取 消</el-button>
					<el-button type="primary" @click="addArea()">确 定</el-button>
				</span>
        </el-dialog>

    </template>



</div>

<script>

    $.get("/cai/area/listState",function(backData){
        app.stateArr=backData.data;
    });
    $.get("/cai/area/location",function (backData){
        app.locationArr=backData.data;
    });
    $.get("/cai/area/admin",function (backData) {
        app.adminArr=backData.data;
    });
    var app = new Vue({
        el: "#app",
        data:{
            info:[],
            stateArr:[],
            locationArr:[],
            adminArr:[],
            area:{},
            updateStateONE:{},
            updateStateTWO:{},
            addAreaVisible:false,
            areaNumberAll:0,
            AreaInfo:{},
            rules: {
                aname: [
                    {required: true, message: '请输入区域名', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                ],
                state: [
                    {required: true, message: '请选择区域状态', trigger: 'blur'},
                ],
                lid: [
                    {required: true, message: '请输选择区域地址', trigger: 'blur'},
                ],
                irid: [
                    {required: true, message: '请分配管理人员', trigger: 'blur'},
                ],
            }
        },
        methods:{
            updateStateON:function(a,b) {
                app.updateStateONE.id = a;
                app.updateStateONE.state= b;
                if (b==1){
                    $.post("/cai/area/updateState",app.updateStateONE,function (backData) {
                        if (backData.code==1){
                            app.$notify({
                                title: '温馨提示',
                                message:backData.msg,
                                type: 'success'
                            });
                            app.updateStuVisible = false;
                            getInfo(1,10);
                        } else {
                            app.$notify.error({
                                title: '温馨提示',
                                message:backData.msg
                            });
                        }
                    });
                } else {
                    app.$notify.error({
                        title: '温馨提示',
                        message:'已经是启用状态了 亲'
                    });
                }
            },
            updateStateOFF:function(a,b) {
                app.updateStateONE.id = a;
                app.updateStateONE.state= b;
                if (b==0){
                    $.post("/cai/area/updateStateTWO",app.updateStateONE,function (backData) {
                        if (backData.code==1){
                            app.$notify({
                                title: '温馨提示',
                                message:backData.msg,
                                type: 'success'
                            });
                            app.updateStuVisible = false;
                            getInfo(1,10);
                        } else {
                            app.$notify.error({
                                title: '温馨提示',
                                message:backData.msg
                            });
                        }
                    });
                } else {
                    app.$notify.error({
                        title: '温馨提示',
                        message:'已经是禁用状态了 亲'
                    });
                }
            },
            addArea:function(){
                app.$refs["AreaInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/area/addArea",app.AreaInfo,function (backData) {
                            if (backData.code==1){
                                app.$notify({
                                    title: '成功',
                                    message: '这是一条成功的提示消息',
                                    type: 'success'
                                });
                                app.addAreaVisible = false;
                                getInfo(1,10);
                            } else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message:backData.msg
                                });
                            }
                        });
                    }
                });
            },
            handleCurrentChange:function(val) {
                getInfo(val,10);
            },
            searchData:function(){
                getInfo(1,10);
            },
            addArealoyee:function(){
                app.addAreaVisible=true;
                app.$refs["AreaInfo"].resetFields();
            }
        }
    });
    function getInfo(a, b) {
        app.area.pageNo = a;
        app.area.pageCount = b;

        $.post("/cai/area/list",app.area,function (backData) {
            app.info=backData.data.areaListAll;
            app.areaNumberAll=backData.data.areaNumber;
        });
    }
    getInfo(1, 10);
</script>

</body>
</html>
